<template>
  <scroll-view :scroll-y="true" class="h-11/12 m-auto w-11/12">
    <uni-forms :modelValue="formData">
      <!-- 工作区 -->
      <uni-card title="工作区" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.gongZuoQu"
            :localdata="gongZuoQu"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 时间 -->
      <uni-card title="时间" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox v-model="formData.shiJian" :localdata="shiJian" />
        </uni-forms-item>
      </uni-card>
      <!-- 消毒液实际浓度 -->
      <uni-card title="消毒液实际浓度" extra="必填*">
        <uni-forms-item>
          <uni-data-checkbox
            v-model="formData.xiaoDuYeShiJiNongDu"
            :localdata="xiaoDuYeShiJiNongDu"
          />
        </uni-forms-item>
      </uni-card>
      <!-- 整改行动 -->
      <uni-card title="整改行动">
        <uni-forms-item>
          <uni-easyinput v-model="formData.zhengGaiXingDong" />
        </uni-forms-item>
      </uni-card>
      <!-- 检查人姓名 -->
      <uni-card title="检查人姓名" extra="必填*">
        <uni-forms-item>
          <uni-easyinput v-model="formData.jianChaRenXingMing" />
        </uni-forms-item>
      </uni-card>
    </uni-forms>
    <ConfigComponent
      @clearFormData="clearFormData"
      @updateFormData="updateFormData"
      :formData="formData"
      name="guoShuXiaoDu"
    />
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ConfigComponent from '@/components/ConfigComponent/ConfigComponent.vue';
// 表格提交信息
const formData = ref({
  gongZuoQu: '', //工作区
  shiJian: '', //时间
  xiaoDuYeShiJiNongDu: '', // 消毒液实际浓度
  zhengGaiXingDong: '', // 整改行动
  jianChaRenXingMing: '', // 检查人姓名
});

// 工作区
const gongZuoQu = [
  {
    text: '水果&蔬菜清洗间',
    value: '水果&蔬菜清洗间',
  },
  {
    text: '专间',
    value: '专间',
  },
];
// 时间
const shiJian = [
  {
    text: '上午',
    value: '上午',
  },
  {
    text: '下午',
    value: '下午',
  },
];
//消毒液实际浓度
const xiaoDuYeShiJiNongDu = [
  {
    text: '＜100 ppm',
    value: '＜100 ppm',
  },
  {
    text: '100-200 ppm',
    value: '100-200 ppm',
  },
  {
    text: '＞200 ppm',
    value: '＞200 ppm',
  },
];
// 清空表单数据
const clearFormData = () => {
  formData.value = {
    gongZuoQu: '', //工作区
    shiJian: '', //时间
    xiaoDuYeShiJiNongDu: '', // 消毒液实际浓度
    zhengGaiXingDong: '', // 整改行动
    jianChaRenXingMing: '', // 检查人姓名
  };
};
// 更新表单数据
const updateFormData = (data: any) => {
  formData.value = data;
};
</script>

<style lang="scss" scoped>
::v-deep.uni-card {
  .uni-card__header {
    .uni-card__header-extra {
      .uni-card__header-extra-text {
        color: #ff0000;
      }
    }
  }
}
</style>
